<template>
	<view>
		<view class="main xbs">
			<view class="top xflex-x">
				<image class="avatar" src="" mode=""></image>
				<view class="">
					<view class="xfz32 xfw500 xcf">
						{{store.user.userinfo.username}}
					</view>
					<view class="xfz26 xcf xmt20">
						{{us.expire_time}}
					</view>
				</view>
			</view>

			<view class="" v-for="(i,index) in list" :key="index">
				
				<view class="title xflex-x xmb40">
					<view class="sp"></view>
					<view class="hy">
						{{i.name}}
					</view>
				</view>
				
				<scroll-view scroll-x="true">
					<view class="xflex-x vip">
						<view class="vip-item xflex-y pr" @click="vipClick(item)" v-for="(item,k) in i.price" :key="k">
							<image class="pa active" v-if="active == item.id" src="/static/image/img_xuanzhong.png" mode="">
							</image>
							<image class="vip-icon" src="/static/image/vips.png" mode=""></image>
							<view class="vip-text">
								{{typefn(item.type)}}
							</view>
							<view class="vip-money">
								<text class="xfz24">￥</text>{{item.price}}
							</view>
							<view class="vip-price">
								<!-- <text>￥</text>{{item.original}} -->
							</view>
						</view>
					</view>
				</scroll-view>
				
			</view>

			<view class="bom">
				<view class="btn" @click="sub()">
					立即支付￥<text style="font-size: 50rpx;">{{toPrice}}</text>
				</view>
				<view class="text">
					购买即视为同意<text style="color: #3F7233;" @click="topage('/pages/index/agreement?title=会员协议&type=member_agreement')">《VIP会员用户协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		userinfos,
		memberLists,
		userorder
	} from "@/network/home.js"
	import {
		topage
	} from '@/utils/common.js'
	
	import {useCounterStore} from "@/Store/index.js"
	const store = useCounterStore()
	
	const us = reactive({
		expire_time: ''
	})
	const getuserinfo = () => {
		userinfos().then(res => {
			console.log(res.code == 401);
			if (res.code == 1) {
				
				us.expire_time = res.data.expire_time_mnp
			}
	
		})
	}
	
	
	let active = ref('')
	let toPrice = ref(0)
	let list = ref([])
	
	const vipClick = (data) =>{
		active.value = data.id
		toPrice.value =data.price
	}
	const getmemberLists = () => {
		memberLists().then(res => {
			console.log(res);

			res.data.forEach(item => {
				console.log();
				item.typename = typefn(item.type)

				return item
			})
			list.value = res.data
			console.log(list.value);
		})
	}

	const typefn = (e) => {
		if (e == 1) {
			return '月度'
		} else if (e == 2) {
			return '季度'
		} else if (e == 3) {
			return '半年'
		} else if (e == 4) {
			return '年度'
		}
	}

	const sub = () => {
		if(!active.value){
			uni.showToast({
				icon:"error",
				title:"请选择会员"
			})
			return
		}
		userorder({
			id: active.value
		}).then(res => {
			uni.requestPayment({
				provider: 'wxpay',
				timeStamp: res.data.timeStamp,
				nonceStr: res.data.nonceStr,
				package: res.data.package,
				signType: res.data.signType,
				paySign: res.data.paySign,
				success: function(res) {
					console.log('success:' + JSON.stringify(res));
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack()
					}, 1000);
				},
				fail: function(err) {
					console.log('fail:' + JSON.stringify(err));
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					});
				}
			});
		})
	}

	onLoad(() => {
		getmemberLists()
		getuserinfo()
	})
</script>

<style lang="scss">
	.main {
		padding: 20rpx 30rpx;
	}

	.top {
		width: 690rpx;
		height: 160rpx;
		background: #3F7233;
		border-radius: 10rpx;
		padding: 44rpx 41rpx;
		box-sizing: border-box;
	}

	.avatar {
		width: 73rpx;
		height: 73rpx;
		border-radius: 50%;
		background-color: #fff;
		margin-right: 21rpx;
	}


	.title {
		margin-top: 30rpx;

		.sp {
			width: 6rpx;
			height: 26rpx;
			background: #3F7233;
			margin-right: 6rpx;
		}

		.hy {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #171F48;
			// line-height: 48rpx;
		}
	}

	.vip {
		&-item {
			flex: 0 0 auto;
			width: 204rpx;
			height: 285rpx;
			margin-right: 23rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx #CCCCCC;
			border-radius: 20rpx;
		}

		&-icon {
			width: 58.2rpx;
			height: 58.2rpx;
			margin-top: 22rpx;

		}

		&-text {
			margin-top: 20rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #171F48;
			line-height: 48rpx;
		}

		&-money {
			font-size: 50rpx;
			font-weight: bold;
			color: #171F48;
			// line-height: 48rpx;
			margin-top: 18rpx;
		}

		&-price {
			font-size: 22rpx;
			font-weight: 500;
			text-decoration: line-through;
			color: #999999;
		}
	}

	.active {
		width: 100%;
		height: 100%;
	}

	.bom {
		// position: absolute;
		// bottom: 30rpx;
		margin-top: 60rpx;
	}

	.btn {

		width: 692rpx;
		height: 101rpx;
		background: #3F7233;
		border-radius: 20rpx;

		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 101rpx;
		text-align: center;
	}

	.text {
		text-align: center;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: bold;
		margin-top: 33rpx;
		color: #2E3243;
	}
</style>